﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Custom Cell Type</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });
        //Custom Cell Type
        function FivePointedStarCellType() {
            this.size = 10;
        }
        FivePointedStarCellType.prototype = new spreadNS.CustomCellType();
        FivePointedStarCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
            if (!ctx) {
                return;
            }

            ctx.save();

            // draw inside the cell's boundary
            ctx.rect(x, y, w, h);
            ctx.clip();
            ctx.beginPath();

            if (value) {
                ctx.fillStyle = "orange";
            } else {
                ctx.fillStyle = "gray";
            }

            var size = this.size;
            var dx = x + w / 2;
            var dy = y + h / 2;
            ctx.beginPath();
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {
                ctx.lineTo(dx + Math.sin(i * dig) * size, dy + Math.cos(i * dig) * size);
            }
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        };
        FivePointedStarCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
            var xm = cellRect.x + cellRect.width / 2,
                    ym = cellRect.y + cellRect.height / 2,
                    size = 10;
            var info = { x: x, y: y, row: context.row, col: context.col, cellRect: cellRect, sheetArea: context.sheetArea };
            if (xm - size <= x && x <= xm + size && ym - size <= y && y <= ym + size) {
                info.isReservedLocation = true;
            }
            return info;
        };
        FivePointedStarCellType.prototype.processMouseUp = function (hitInfo) {
            var sheet = hitInfo.sheet;
            if (sheet && hitInfo.isReservedLocation) {
                var row = hitInfo.row, col = hitInfo.col, sheetArea = hitInfo.sheetArea;
                var newValue = !sheet.getValue(row, col, sheetArea);
                var cellEditInfo = { row: row, col: col, newValue: newValue };
                var undoAction = new spreadNS.UndoRedo.CellEditUndoAction(sheet, cellEditInfo);
                sheet.doCommand(undoAction);
                return true;
            }
            return false;
        };

        function FullNameCellType() {
        }
        FullNameCellType.prototype = new spreadNS.CustomCellType();
        FullNameCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
            if (value) {
                spreadNS.CustomCellType.prototype.paint.apply(this, [ctx, value.firstName + "." + value.lastName, x, y, w, h, style, options]);
            }
        };
        FullNameCellType.prototype.updateEditor = function(editorContext, cellStyle, cellRect) {
            if (editorContext) {
                $(editorContext).width(cellRect.width);
                $(editorContext).height(100);
            }
        };
        FullNameCellType.prototype.createEditorElement = function () {
            var div = document.createElement("div");
            var $div = $(div);
            $div.attr("gcUIElement", "gcEditingInput");
            $div.css("background-color", "white");
            $div.css("position", "absolute");
            $div.css("overflow", "hidden");
            $div.css("border", "2px #5292f7 solid");
            var $span1 = $("<span></span>");
            $span1.css("display", "block");
            var $span2 = $("<span></span>");
            $span2.css("display", "block");
            var $input1 = $("<input type='text'/>");
            var $input2 = $("<input type='text'/>");
            $div.append($span1);
            $div.append($input1);
            $div.append($span2);
            $div.append($input2);
            return div;
        };
        FullNameCellType.prototype.getEditorValue = function (editorContext) {
            if (editorContext && editorContext.children.length === 4) {
                var input1 = editorContext.children[1];
                var firstName = $(input1).val();
                var input2 = editorContext.children[3];
                var lastName = $(input2).val();
                return { firstName: firstName, lastName: lastName };
            }
        };
        FullNameCellType.prototype.setEditorValue = function (editorContext, value) {
            if (editorContext && editorContext.children.length === 4) {
                var span1 = editorContext.children[0];
                $(span1).text("First Name:");
                var span2 = editorContext.children[2];
                $(span2).text("Last Name:");
                if (value) {
                    var input1 = editorContext.children[1];
                    $(input1).val(value.firstName);
                    var input2 = editorContext.children[3];
                    $(input2).val(value.lastName);
                }
            }
        };
        FullNameCellType.prototype.isReservedKey = function (e) {
            //cell type handle tab key by itself
            return (e.keyCode === spreadNS.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
        };
        FullNameCellType.prototype.isEditingValueChanged = function(oldValue, newValue) {
            if (newValue.firstName != oldValue.firstName || newValue.lastName != oldValue.lastName) {
                return true;
            }
            return false;
        };
        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            sheet.isPaintSuspended(true);
            sheet.setColumnWidth(0, 100);
            sheet.setColumnWidth(1, 170);

            var columnInfo = [
                { name: "result", displayName: "Result", cellType: new FivePointedStarCellType(), size: 50 },
                { name: "person", displayName: "Person", cellType: new FullNameCellType(), size: 170 }
            ];

            var source = [
                { result: true, person: {firstName:"LeBron",lastName:"James"}},
                { result: false, person: { firstName: "Chris", lastName: "Bosh" } },
                { result: true, person: { firstName: "Dwyane", lastName: "Wade" } },
                { result: false, person: { firstName: "Mike", lastName: "Miller" } },
                { result: true, person: { firstName: "Mike", lastName: "Miller" } },
                { result: true, person: { firstName: "Udonis", lastName: "Haslem" } },
                { result: true, person: { firstName: "Mario", lastName: "Chalmers" } },
                { result: true, person: { firstName: "Joel", lastName: "Anthony" } },
                { result: false, person: { firstName: "Shane", lastName: "Battier" } },
                { result: false, person: { firstName: "Ray", lastName: "Allen" } },
                { result: true, person: { firstName: "James", lastName: "Jones" } },
                { result: false, person: { firstName: "Rashard", lastName: "Lewis" } },
                { result: true, person: { firstName: "Norris", lastName: "Cole" } },
                { result: true, person: { firstName: "Chris", lastName: "Andersen" } },
                { result: false, person: { firstName: "Jarvis", lastName: "Varnado" } },
                { result: true, person: { firstName: "Juwan", lastName: "Howard" } },
            ];
            sheet.setDataSource(source);
            sheet.bindColumns(columnInfo);
            sheet.isPaintSuspended(false);

        };
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height: 420px;border: 1px solid gray;"></div>
</div>
</body>
</html>
